<template>
  <div class="h-full flex flex-col min-h-0 overflow-hidden">
    <NCard size="small">
      <div class="flex justify-between items-center">
        <p class="text-lg font-bold">会话管理</p>
        <div class="flex gap-2">
          <NInput v-model:value="pagination.filter" @change="getChatSetting()" placeholder="聊天内容"></NInput>
          <NButton type="default" @click="getChatSetting()">刷新</NButton>
        </div>
      </div>
    </NCard>
    <NDataTable
      bordered
      :columns="columns"
      :data="list"
      remote
      flex-height
      :style="{ flex: 1, height: '100%' }"
      class="mb-4"
    >
    </NDataTable>
    <div class="w-full flex justify-end">
      <NPagination
        class="mr-4"
        v-model:page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :item-count="pagination.total"
        :page-sizes="pageSizes"
        show-quick-jumper
        show-size-picker
        :on-update:page="
          (page: number) => {
            pagination.page = page
            getChatSetting()
          }
        "
        :on-update:page-size="
          (pageSize: number) => {
            pagination.pageSize = pageSize
            getChatSetting()
          }
        "
      >
      </NPagination>
    </div>
  </div>
</template>

<script setup lang="ts" name="">
import { h, ref } from 'vue'
import { NButton, NDataTable, NCard, NInput, NPagination, useMessage } from 'naive-ui'
import { getChatHistoryAPI, delChatHistoryAPI } from '@/api/chatHistory'
import type { ChatHistory } from '@/types'
defineOptions({
  name: 'chatSetting',
})
const message = useMessage()
/** 数据列表 */
const list = ref([])
/** 分页配置 */
const pagination = ref({
  pageSize: 20,
  page: 1,
  total: 0,
  filter:''
})
const pageSizes = [
  {
    label: '10 每页',
    value: 10,
  },
  {
    label: '20 每页',
    value: 20,
  },
  {
    label: '30 每页',
    value: 30,
  },
  {
    label: '40 每页',
    value: 40,
  },
]
/** 列配置 */
const columns = [
  {
    title: 'ID',
    key: 'id',
  },
  {
    title: '标题',
    key: 'dialogueTitle.name',
  },
  {
    title: '内容',
    key: 'content',
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '角色',
    key: 'role',
  },
  {
    title: '时间',
    key: 'createTime',
  },
  {
    title: '操作',
    key: 'actions',
    render(row: { id: string }) {
      return h(
        NButton,
        {
          type: 'error',
          strong: true,
          size: 'small',
          onClick: () => {},
        },
        { default: () => '删除' },
      )
    },
  },
]

async function getChatSetting() {
  const res = await getChatHistoryAPI({
    page: pagination.value.page.toString(),
    limit: pagination.value.pageSize.toString(),
    name: pagination.value.filter,
  })
  if (res.code === 200) {
    list.value = res.data.data.map((item: ChatHistory) => {
      item.role = item.identity == 1 ? item.user.name : item.ai.name
      return item
    })
    pagination.value.total = res.data.count
    console.log(list.value)
  } else {
    message.error(res.msg)
  }
}
getChatSetting()
</script>

<style scoped></style>
